<template>
  <div>

    <Head />
    <main>
      <div class="top">
        <div class="left">
          <router-link to="/home">&lt;&nbsp;返回主页</router-link>
        </div>
        <div>正式考试</div>
        <el-dropdown class="listBtn" @command="changeShow">
          <el-button type="success" @click="isShow = true">
            全部<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">已完成</el-dropdown-item>
            <el-dropdown-item command="0">未完成</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="content">
        <div class="item" v-for="(item, i) in testArr" :key="item._id"
          v-show="isShow ? true : isShowChange ? isTested(i) : !isTested(i)">
          <div class="item-row">
            <p>{{ item.title }}</p>
          </div>
          <div class="item-row">
            <span>考试类型：</span>
            <span class="red">{{ item.typeId.type }}</span>
          </div>
          <div class="item-row">
            <span>考试地址：</span>
            <span class="red">信息中心</span>
          </div>
          <div class="item-row">
            <span>已考人数：</span>
            <span class="red">222</span>
          </div>
          <a class="item-row startBtn" @click="routerTo(i)"
            :class="{ grayBtn: isTested(i) }">
            {{ !isTested(i) ? "去练习" : "已完成,查看解析" }}</a>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Head from "../home/Head.vue";
export default {
  components: {
    Head
  },
  data() {
    return {
      testArr: [],
      topListArr: [],
      isShow: true,
      isShowChange: true
    };
  },
  methods: {
    routerTo(i) {
      if (this.isTested(i))
        return this.$router.push({
          path: "/stest5",
          query: {
            testId: this.testArr[i]._id
          }
        });
      localStorage.testInfo = JSON.stringify(this.testArr[i]);
      this.$router.push("/stest2");
    },
    isTested(i) {
      let nowId = this.testArr[i]._id;
      let bool = this.topListArr.some((v) => v.testId._id == nowId);
      return bool;
    },
    // 切换显示状态
    changeShow(num) {
      this.isShow = false;
      this.isShowChange = +num;
    }
  },
  async mounted() {
    // 获取考试信息
    this.$http
      .post("/tests/getOneTests", this.$route.query)
      .then(({ data }) => {
        this.testArr = data;
      });
    // 获取已考的数据
    await this.$http.post("/tested/getTestResults").then(({ data }) => {
      // 筛选当前学生的已考信息
      this.topListArr = data.result.filter(
        (v) => v.studentId._id == this.$store.state.userInfo._id
      );
    });
  }
};
</script>

<style lang="scss" scoped>
main {
  width: 1050px;
  margin: 0 auto;
  //   border: 1px solid red;
  // background-color: white;
  margin-top: 36px;
  .top {
    height: 68px;
    background-color: white;
    text-align: center;
    line-height: 68px;
    position: relative;
    color: #333;
    .listBtn {
      position: absolute;
      right: 10px;
      top: 0;
    }
    .el-button--success {
      background-color: #009600;
    }
    .left {
      width: 105px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 20px;
      .lt {
        font-size: 30px;
      }
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 30%;
      height: 230px;
      background-color: white;
      margin-top: 20px;
      border-radius: 10px 10px 0 0;
      // box-shadow: 5px 5px 5px #c0c0c0;
      .item-row {
        height: 20%;
        box-sizing: border-box;
        border: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        padding-left: 20px;
        p {
          // font-size: 12px;
          margin: 0;
        }
        span {
          margin-right: 25px;
        }
        .red {
          color: #ff3300;
        }
      }
      .item-row.startBtn {
        width: 100%;
        justify-content: center;
        padding: 0;
        color: white;
        background-color: #009600;
        border: none;
      }
      .grayBtn {
        background-color: #878e87 !important;
      }
    }
    .item:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>
